地图库调研

发表于 | 更新于: | 分类于 ， | 阅读次数:
字数统计: 2,527 | 阅读时长 ≈ 10

2021.11.28 星期日 19:44

实际

需要区分gis（webGIS）和 地图库/javascript api, 工具包，地图组件的区别。

腾讯位置服务

JavaScript API: https://lbs.qq.com/webApi/javascriptV2/jsGuide/jsOverview
JavaScript API GL: https://lbs.qq.com/webApi/javascriptGL/glGuide/glOverview

有微信小程序的项目，所以使用了腾讯位置服务。（优先使用国内库）
h5项目（旧）就是JavaScript API，可以缩小（新老）差异，快速重构。
其他就是性能和能力上差异。
都是免费开放，包括工具库。

两者实现是不一样的。
JavaScript API 兼容性更好一些，偏向底层js/浏览器，包括移动设备。
提供的图片格式：https://m3.map.gtimg.com/hwap?z=14&x=26510&y=20073&styleid=1000&scene=0&version=957

Javascript API GL 基于WebGL，3D的。效果更炫酷，也不用担心性能/渲染/计算的问题。而且不必须熟悉WebGL知识，api。

JavaScript API V2可用于在网站中加入交互性强的街景、地图，能很好地支持PC及手机设备，身材小巧，动画效果顺滑流畅，动感十足，提供地图操作、标注、地点搜索、出行规划、地址解析、街景等接口，功能丰富，并免费开放各种附加工具库。JavaScript API V2是免费服务，任何提供免费访问的网站都可以调用，请参见 使用条款 。
Javascript API GL是基于WebGL技术打造的3D版地图API，3D化的视野更为自由，交互更加流畅。

lib价值方式

常规

同步和异步（动态）。

封装组件

react-amap: https://github.com/ElemeFE/react-amap/blob/v1.0.1/components/utils/APILoader.js

是一个基于 React 封装的高德地图组件。
提供了APILoader.js， 还是动态加载，但是在windows.callback 加入Promise。
包括script.async, script.defer。

框架中

主要指react，vue 等mvc框架，涉及到动态/异步加载，包括mounted后才可以有真实dom，还需要refs。
1) 定义callback：window.apiLoaded = setMap();
2) 所以需要先提供setMap函数。
3) 最后动态加载api。但是不需要放在mounted生命周期内。

以react-hooks 为例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function h5Map() {
  const mapDomRef = useRef(null);
  const qqMap, mapCenter;
  let setMap = useCallback(() => {
    const mapEl = mapDomRef.current;
    // 设置地图中心点
    mapCenter = new window.qq.maps.LatLng(latitude, longitude);
    qqMap = new window.qq.maps.Map(mapEl, {
        center: mapCenter,
        zoom: mapInfo.scale || 14,
        // 启用缩放控件
        zoomControl: false,
        // 地图类型控件，若为false则停用状态地图类型控件
        mapTypeControl: false,
    });
  }, [mapDomRef]);
  window.loadedMapApi = setMapImgNew;
  loadScript();
  return (<View><View ref={mapDomRef} style={mapStyle}></View></View>)
}

库资源

常用的前端地图框架

# 常用的前端地图框架（WebGIS框架）
# 常用的前端地图框架（WebGIS框架）

  1. Leaflet
    Leaflet 是最著名的前端地图可视化库，它开源、体积小、结构清晰、简单易用。

  2. Mapbox GL JS
    Mapbox GL JS 是目前最新潮的前端地图库，它的矢量压缩、动态样式和三维性能令人印象深刻。它本身是开源的，但一般依赖于Mapbox公司提供的底图服务。

  3. ArcGIS API for JS
    ArcGIS API for JS 是较为学院派的前端地图库，它是ArcGIS开发套件中的一部分，和桌面端和服务器端ArcGIS软件有较好的协作。它不开源且收费不低，在学术场景下较为常用。

  4. Openlayers
    Openlayers 也是常用的前端地图库，它开源，相比于Leaflet更加复杂和完备。

  5. Cesium
    Cesium 是三维地理可视化的常用库，在大尺度的可视化（地形、建筑、地球）中十分常用。

  6. 百度地图 JS API /百度地图 API GL
    百度地图 JS API 是传统的二维地图，百度地图 API GL 是三维地图，它们依赖百度地图提供的后台服务。除了地图服务外还有检索、导航、实时交通等关联服务。开发者有免费的限额。

  7. 高德地图 JS API
    高德地图 JS API 与百度类似。

  8. Google Maps JS API
    谷歌地图 JS API 在境外有更好的数据。

  9. AntV L7
    AntV L7 是空间数据可视化库，它可以使用高德地图等协作构建地图可视化。

  10. Mapbox.js
    Mapbox.js 是 Leaflet 的一个扩展插件（与 Mapbox GL JS 不同）。

8款地图API和javascript库

「开源项目」8款最受欢迎的地图API和javascript库
使用javascript函数库对地图进行分类
如何选择有效的解决方案
版本和升级
地图工具和库
Leafletjs
Openlayers
Mapbox
Google Maps API
Datamaps
Bing Maps
ArcGIS
Zeemaps
写在最后

WebGIS 前端框架

WebGIS 前端框架

WebGIS（网络地理信息系统）是指工作在Web网上的GIS,是传统的GIS在网络上的延伸和发展，具有传统GIS的特点，可以实现空间数据的检索、查询、制图输出、编辑等GIS基本功能，同时也是Internet 上地理信息发布、共享和交流协作的基础。

四个常见的webGIS JS API。

Openlayers

OpenLayers 是一个高性能、功能丰富的库，用于在 Web 上创建交互式地图。它可以显示从任何来源加载的地图图块、矢量数据和标记。

Leaflet

Leaflet 是用于移动友好型交互式地图的领先开源 JavaScript 库。 JS 的重量仅为 39 KB，它具有大多数开发人员需要的所有映射功能。

ArcGIS js API

SuperMap iClient JavaScript

superMap作为国内的gis的领头羊，其技术实力还是很强的，尤其是桌面版的软件核心代码从头用c++来进行重写，性能上还是很高的，很看好其发展潜力。
闲话不再多说，言归正传，SuperMap的js api其核心还是前面的讲的leaflet和openlayers等之类的开源代码，它进行了二次封装，详见下图：

地图相关知识

记一次前端”揭开绘制地图的神秘面纱”分享会

四.geojson数据到底是什么
geojson是用json的语法表达和存储地理数据，可以说是json的子集, 它不是专门js使用的这点要清楚.
地图上有山川, 河流, 海洋等等的地理信息, 那么如何描述一条河? 这个时候就要使用geojson格式的文件来描绘.
并不是必须用geojson, geojson只是一套规范, 各大解析器用这套规范来解析生成对应的景色, 我们完全可以制定自己的规范来实现这些, 无非是兼容性不好需要自己写绘制的解析器.
五.geojson详细介绍

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// 描述多个点(FeatureCollection)
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        // "type": "Point",  // 专指画点

        "type": "MultiPoint", // 多点, 也就是连续画多个同样的点
        "coordinates": [[105.380859375, 31.57853542647338],
        [105.580859375, 31.52853542647338]
        ]
      }
    },
  ]
}
// 4. 描述一条线(LineString)
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "LineString", // 这里所有的点会连接在一起形成线
        "coordinates": [[105.6005859375, 30.65681556429287],
        [107.95166015624999, 31.98944183792288],
        [109.3798828125, 30.031055426540206],
        [107.7978515625, 29.935895213372444]]
      }
    },
  ]
}

六. geojson的相关网站与工具的使用
七.自制geojson解析绘制工具的思路

八.地图的基本概念 (瓦片地图, 矢量地图)
有没有发现咱们使用的地图在放大的时候,区域都是一个方块一个方块的被加载成图像的. 如果你打开控制台的network还可以看到有好多png的请求.
地图这种超大的数据, 超多细节是如何做到快速渲染的? 下面是现在比较主流的两种地图的绘制模式.

栅格瓦片地图
顾名思义图片像是瓦片一样堆叠起来的格子状成为地图, 有点像拼图, 是不是感觉一点也不高大上….
但这里也是有很多问题要解决的,

矢量地图
顾名思义就是矢量绘制出图形, 只要不是照片肯定会小很多, 对于矢量为什么轻量并且不失真可以参考的上篇文章svg的分享svg实战

矢量瓦片采用和栅格瓦片相同的分级切割方案，不同的是，瓦片数据传输的是地理数据，包括道路、土地、建筑等，通过在前端做地图的渲染，具有如下优势：

极少占用服务器空间，降低网络开销，本地化部署只需5G空间(中国)。
地图的底图样式更换简单.
因为具有了地理数据本身，可在数据基础上做三维空间的延伸，例如 3D 建筑。
数据保密性强。

九.不同的坐标系
** 地球本身是个椭球体, 要把它以平面的方式绘制在一个矩形上也真的不好办, 现在有不少绘制的方式但是都有各自的优缺点, 感兴趣的朋友可以查查看具体的细节, 我这里就简单介绍下比较常见的方式.

经纬度EPSG：4326 也就是地图的默认坐标
现在球体上定义好经纬度, 然后在正方形纸上画出刻度, 对应的绘制
墨卡托投影(EPSG：3785 )
把地球放在一个圆筒里面, 假设地球内部有个光源, 那么地球在圆柱上的投影就是地图
火星坐标系
火星坐标是国家测绘局为了国家安全在原始坐标的基础上进行偏移得到的坐标，基本国内的电子地图、导航设备都是采用的这一坐标系或在这一坐标的基础上进行二次加密得到的。
火星坐标的真实名称应该是 GCJ-02 坐标，基本上所有的国内的电子地图采用的都是火星坐标系甚至 Google 地图中国部分都特意为中国政府做了偏移。

百度坐标系

十.更快的前端数据 -> WebAssembly
十一. hello 级别的WebAssembly

十二.(组内篇)我写的2d与3d工程的代码介绍

knowledge is no pay,reward is kindness
分享到： 收藏夹 复制网址 邮件 微信 QQ空间 腾讯微博 豆瓣 一键分享 更多
0%